<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator="/" style="margin-bottom: 20px;">
			<el-breadcrumb-item :to="{ path: '/body' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>小区管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 搜索栏 -->
		<el-form ref="form" label-width="80px" :inline="true">
			<el-form-item label="小区名称">
				<el-input v-model="queryInfo.communityName" placeholder="请输入内容" size="small"
					style="width: 200px;margin-right: 10px;" clearable></el-input>
			</el-form-item>
			<el-form-item label="创建日期">
				<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange" size="small"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" style="margin-left: 10px;"
					@click="queryCommunityList">搜索</el-button>
			</el-form-item><br />
			<el-form-item>
				<el-button size="small" type="primary" style="margin-left: 10px;" @click="addCommunity">新增小区</el-button>
			</el-form-item>
		</el-form>
		<!-- 表格 -->
		<template>
			<el-table :data="communityList" style="width: 100%" border :header-cell-style="{backgroundColor:'#eee'}">
				<el-table-column prop="communityId" label="ID">
				</el-table-column>
				<el-table-column prop="communityName" label="名称">
				</el-table-column>
				<el-table-column prop="communityAddress" label="位置">
				</el-table-column>
				<el-table-column prop="communityUserCount" label="用户数量">
				</el-table-column>
				<el-table-column prop="communityShopCount" label="关联门店">
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间">
				</el-table-column>
				<el-table-column label="操作">
					<!-- 作用域插槽 -->
					<template slot-scope="scope">
						<el-link :underline="false" type="primary" style="font-size: 12px; margin-right: 10px;"
							@click="lookshop(scope.row.communityId)">查看关联门店</el-link>
						<el-link :underline="false" type="primary" style="font-size: 12px;margin-right: 10px;"
							@click="edit(scope.row)">修改</el-link>
						<el-link :underline="false" type="primary" style="font-size: 12px;"
							@click="del(scope.row.communityId)">删除</el-link>
					</template>

				</el-table-column>
			</el-table>
		</template>
		<div class="block" style="margin-top: 20px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="queryInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<!-- 对话框 -->
		<el-dialog :title="title" :visible.sync="show" @close="concel">
			<el-form :model="communityData">
				<el-form-item label="小区名称" label-width="120px">
					<el-input v-model="communityData.communityName" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="小区地址" label-width="120px">
					<el-cascader v-model="address" :options="city">
					</el-cascader>
				</el-form-item>
				<el-form-item label="详细地址" label-width="120px">
					<el-input v-model="communityData.communityAddress" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="" label-width="120px">
					<el-button @click="getLocation">获取位置</el-button>
					<span
						v-show="communityData.communityLongitude">{{communityData.communityLongitude}},{{communityData.communityLatitude}}</span>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="concel">取 消</el-button>
				<el-button type="primary" @click="sure">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 关联门店对话框 -->
		<el-dialog title="查看关联门店" :visible.sync="showshop" @close="concelShop">
			<el-form ref="form" label-width="80px" :inline="true">
				<el-form-item label="门店名称">
					<el-input v-model="shop.shopName" placeholder="请输入内容" size="small"
						style="width: 200px;margin-right: 10px;" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" style="margin-left: 10px;"
						@click="lookshop(communityId)">搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" style="margin-left: 10px;"
						@click="toAddShop">添加关联门店</el-button>
				</el-form-item>
			</el-form>

			<template>
				<el-table :data="shopData" style="width: 100%" border :header-cell-style="{backgroundColor:'#eee'}">
					<el-table-column type="index" label="序号">
					</el-table-column>
					<el-table-column prop="shopName" label="名称">
					</el-table-column>
					<el-table-column prop="shopId" label="ID">
					</el-table-column>
					<el-table-column prop="shopAddress" label="地址">
					</el-table-column>
					<el-table-column prop="shopOrderCount" label="订单数量">
					</el-table-column>
					<el-table-column label="操作"> -->
						<!-- 作用域插槽 -->
						<template slot-scope="scope">
							<el-link :underline="false" type="primary" style="font-size: 12px;"
								@click="delShop(scope.row.communityId)">删除</el-link>
						</template>
					</el-table-column>
				</el-table>
			</template>
			<div class="block" style="margin-top: 20px;">
				<el-pagination @size-change="shopSizeChange" @current-change="shopCurrentChange"
					:current-page="shop.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="shop.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="shopTotal">
				</el-pagination>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="concelShop">取 消</el-button>
				<el-button type="primary">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 添加关联门店 -->
		<el-dialog title="添加关联门店" :visible.sync="showStore">
			<el-form ref="form" label-width="80px" :inline="true">
				<el-form-item label="门店名称">
					<el-input v-model="store.shopName" placeholder="请输入内容" size="small"
						style="width: 200px;margin-right: 10px;" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" style="margin-left: 10px;" @click="toAddShop">搜索</el-button>
				</el-form-item>
			</el-form>
			<template>
				<el-table :data="storeList" style="width: 100%" border :header-cell-style="{backgroundColor:'#eee'}"
					@selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="shopName" label="名称">
					</el-table-column>
					<el-table-column prop="shopId" label="ID">
					</el-table-column>
					<el-table-column prop="shopAddress" label="地址">
					</el-table-column>
					<el-table-column prop="shopOrderCount" label="订单数量">
					</el-table-column>
				</el-table>
			</template>
			<div class="block" style="margin-top: 20px;">
				<el-pagination @size-change="shopSizeChange1" @current-change="shopCurrentChange1"
					:current-page="shop.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="shop.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="storeTotal">
				</el-pagination>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button>取 消</el-button>
				<el-button type="primary" @click="addStore">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
				queryInfo: {
					communityName: '',
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 5,
				},
				date: [],
				communityList: [],
				total: 1,
				title: "新增小区",
				show: false,
				city: citys,
				address: [],
				communityData: { // 小区信息
					addOrUpdateFlag: 1, // 判断是新增还是修改的标志  1:新增  2：修改
					communityAddress: "", // 小区详细地址
					communityAreaCode: "", // 小区位置编码
					communityCity: "", // 小区所属城市
					communityCoordinates: "", // 小区所属详细地址--
					communityDistrict: "", // 小区所属区域 
					communityId: "", // 小区编号
					communityLatitude: "", // 小区纬度
					communityLongitude: "", // 小区经度
					communityName: "", // 小区名称
					communityProvince: "", // 小区所属省份/直辖市
				},
				shop: {
					pageNum: 1,
					pageSize: 5,
					shopName: "",
					communityId: "",
				},
				shopData: [],
				showshop: false,
				communityId: '', //用来定义全局，在使用搜索栏时，可以引用id
				shopTotal: 1,

				showStore: false,
				storeList: [],
				store: {
					pageNum: 1,
					pageSize: 10,
					shopName: '',
					communityId: '',
				},
				storeTotal: 1,
				multipleSelection: [],
			}
		},
		methods: {
			//遍历添加关联门店
			addStore(){
				let shopArr=[];
				//遍历数组
				for(let it of this.multipleSelection){
					shopArr.push(it.shopId)
				}
				this.$http.post('associatedStores/addAssociatedStores',{
					fendeShopCommunityList:shopArr,
					panghuCommunityId:this.communityId
				})
				.then(res=>{
					if(res.data.status==200){
						this.$message.success('添加成功！')
						this.showStore=false
						this.queryCommunityList()
					}else{
						this.$message.error('添加失败！')
					}
				})
				.catch(error=>{
					this.$message.error('服务器异常！')
				})
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			//打开添加关联门店
			toAddShop() {
				this.store.communityId = this.communityId
				this.$http.get('associatedStores/findShopListByAdd', {
						params: this.store
					})
					.then(res => {
						if (res.data.status == 200) {
							this.storeList = res.data.data.list;
							this.storeTotal = res.data.data.total;
							this.showshop = false;
							this.showStore = true;
						} else {
							this.$message.error('服务器接口异常')
						}
					})
			},
			shopSizeChange1(val) {
				this.store.pageSize = val;
				this.toAddShop()
			},
			shopCurrentChange1(val) {
				this.store.pageNum = val;
				this.toAddShop()
			},
			
			//删除
			delShop(id) {
				this.$http.post('associatedStores/associatedStoresRemove',{
					panghuCommunityId:this.communityId,
					panghuShopId:id
				})
				.then(res=>{
					console.log(res)
					if(res.data.status==200){
						this.$message.success('删除成功！')
					}else{
						this.$message.error('删除失败！')
					}
				})
				.catch(error=>{
					this.$message.error('服务器异常！')
				})
			},
			//查看关联门店
			lookshop(id) {
				this.showshop = true
				this.communityId = id
				this.shop.communityId = id
				this.$http.get('associatedStores/associatedStoresList', {
						params: this.shop
					})
					.then(res => {
						if (res.data.status = 200) {
							this.shopData = res.data.data.list
							this.shopTotal = res.data.data.total
						} else {
							this.$message.error('服务器接口异常！')
						}
					})
					.catch(error => {
						this.$message.error('服务器异常！')
					})
			},
			//取消查看门店
			concelShop() {
				this.showshop = false
			},
			shopSizeChange(val) {
				this.shop.pageSize = val;
				this.lookshop(this.communityId)
			},
			shopCurrentChange(val) {
				this.shop.pageNum = val;
				this.lookshop(this.communityId)
			},
			//删除
			del(id) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post('community/communityRemove', {
							communityId: id
						})
						.then(res => {
							if (res.data.status == 200) {
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
								this.queryCommunityList()
							} else {
								this.$message({
									type: 'info',
									message: '删除失败！'
								});
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			//修改
			edit(row) {
				this.communityData = row
				this.show = true
				this.title = '编辑小区'
				// 将一行中的三个位置信息给到address中，这样地址框就可以显示了
				this.address = [this.communityData.communityProvince, this.communityData.communityCity, this.communityData
					.communityDistrict
				]
				this.communityData.addOrUpdateFlag = 2
			},
			//获取经纬度
			getLocation() {
				if (!this.communityData.communityProvince) {
					this.$message.error('请先选择地区')
					return false
				}
				let address = this.communityData.communityProvince + this.communityData.communityCity + this.communityData
					.communityDistrict + this.communityData.communityAddress
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
						params: {
							key: '457886b5972a97e93fb9cdccebfd450f',
							'address': address
						}
					})
					.then(res => {
						let addr = res.data.geocodes[0].location
						this.communityData.communityLongitude = addr.split(',')[0]
						this.communityData.communityLatitude = addr.split(",")[1]
					})
			},
			//确定按钮
			sure() {
				if (!this.communityData.communityName) {
					this.$message.error('请先完善信息！')
					return false
				}
				this.$http.post('community/communityUpdate', this.communityData)
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success('操作成功！')
							this.show = false
							this.queryCommunityList()
						} else {
							this.$message.error('服务器接口异常！')
						}
					})
					.catch(error => {
						this.$message.error('服务器异常！')
					})
			},
			//取消按钮
			concel() {
				this.show = false
				this.communityData = {
						addOrUpdateFlag: 1, // 判断是新增还是修改的标志  1:新增  2：修改
						communityAddress: "", // 小区详细地址
						communityAreaCode: "", // 小区位置编码
						communityCity: "", // 小区所属城市
						communityCoordinates: "", // 小区所属详细地址--
						communityDistrict: "", // 小区所属区域 
						communityId: "", // 小区编号
						communityLatitude: "", // 小区纬度
						communityLongitude: "", // 小区经度
						communityName: "", // 小区名称
						communityProvince: "", // 小区所属省份/直辖市					
					},
					this.address = []
			},
			//点击新增小区呼出对话框
			addCommunity() {
				this.show = true
				this.title = '新增小区'
			},
			// 当显示数量发生改变时
			handleSizeChange(val) {
				this.queryInfo.pageSize = val;
				this.queryCommunityList()
			},
			//当页码发生改变时			
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val;
				this.queryCommunityList()
			},
			//调接口方法
			queryCommunityList() {
				this.$http.get('community/communityList', {
						//直接用queryInfo中的属性
						params: this.queryInfo
					})
					.then(res => {
						if (res.data.status == 200) { //判断是否连接上接口
							this.communityList = res.data.data.list
							this.total = res.data.data.total
						} else {
							this.$message.error('服务器异常接口！')
						}
					})
					.catch(error => {
						this.$message.error("服务器异常！")
					})
			},
		},
		watch: {
			date() {
				if (this.date) { //判断date是否存在
					this.queryInfo.startTime = this.date[0];
					this.queryInfo.endTime = this.date[1];
				} else {
					this.queryInfo.startTime = ''
					this.queryInfo.endTime = ''
				}
			},
			address() {
				this.communityData.communityProvince = this.address[0]
				this.communityData.communityCity = this.address[1]
				this.communityData.communityDistrict = this.address[2]
			}
		},
		mounted() {
			this.queryCommunityList()
		},
	}
</script>

<style>
</style>